<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
    <link type="text/css" rel="stylesheet" href="css/chapter3.css"/>
</head>
<body>
    <pre>
        JavaScript插件：在Bootstrap中使用js
    </pre>

    <div id="div1"></div>

    <a href="#mymodal" class="btn btn-primary" data-toggle="modal">点击按钮触发弹框</a>
    
    <div id="mymodal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">提示</h4>
                </div>
                <!-- <div class="media-body">
                    <p style="padding-left: 20px;">请查看内容</p>
                </div> -->
                <input type="text" class="form-control" style="width:40%;margin: 0px auto;" placeholder="正常输入框"/>
                <input type="text" class="form-control" placeholder="正常输入框"/>
                <div>
                    <button class="btn btn-primary" style="width:100%;" id="modalSave">保存</button>
                    <!-- <button class="btn btn-default" data-dismiss="modal">关闭</button> -->
                </div>
            </div>
        </div>
    </div>

    <br/>

    <div id="navTabDiv">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#name1" data-toggle="tab">home</a></li>
        <li><a href="#name2" data-toggle="tab">Profile</a></li>
        <li><a href="#name3" data-toggle="tab">fat</a></li>
        <li><a href="#name4" data-toggle="tab">mdo</a></li>
    </ul>
    <!--选项卡面板-->
    <div class="tab-content">
        <div class="tab-pane fade in active" id="name1"> <!-- fade有淡入淡出的效果-->
            <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt
                tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor,
                williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
                dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson
                ex squid. Aliquip placeat salvia cillum iphone.Seitan aliquip quis cardigan
                american apparel, butcher voluptate nisi qui. </p>
        </div>
        <div class="tab-pane fade " id="name2">
            <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin
                coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings
                next level wes anderson artisan four loko farm-to-table craft beer twee.
                Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean
                shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore
                aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna
                velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson
                8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
                biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui
                sapiente accusamus tattooed echo park.</p>
        </div>
        <div class="tab-pane fade" id="name3">
            <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out
                mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.
                Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard
                locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy
                irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi
                whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk
                vice blog. Scenester cred you probably haven't heard of them, vinyl craft
                beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
        </div>
        <div class="tab-pane fade" id="name4">
            <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party
                before they sold out master cleanse gluten-free squid scenester freegan
                cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf
                cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR,
                banh mi before they sold out farm-to-table VHS viral locavore cosby
                sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh
                craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo
                park vegan.</p>
        </div>
    </div>
    </div>

    <br/><br/>

    <div id="lb">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- 图片容器 -->
        <div class="carousel-inner" >
            <div class="item active">
                <img src="image/ylimg1.jpg" class="img-responsive" alt="...">
                <div class="carousel-caption ">
                </div>
            </div>
            <div class="item">
                <img src="image/ylimg2.jpg" class="img-responsive" alt="...">
                <div class="carousel-caption">
                    <h3>我的小尼克学堂</h3>
                    <p>来自美国的11项儿童能力培养方案，看中英文动画 培养儿童11项能力</p>
                </div>
            </div>
        </div>
         <!--圆圈指示符-->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
        </ol>
        <!-- 左右控制按钮 -->
        <a class="left carousel-control" href="#myCarousel"  data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" ></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
    </div>

    <br/><br/><br/>


    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/chapter3.js"></script>
    <script>
        //默认弹出（激活弹窗）
        //$('.modal').modal();
    </script>    
</body>
</html>